<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<title>Sample</title>
<style type="text/css">
div.online{/*  在线时显示为绿色  */
	color: #090;
	font-weight:bold;
}
div.offline{/*  离线时显示为红色  */
	color: #F00;
	font-weight:bold;
}
</style>
<script type="text/javascript">
   // 该函数用来检测浏览器状态——"离线"或者"在线"
   function updateOnlineStatus() {
	  // 获取"离线"或者"在线"
      var condition = navigator.onLine ? "online" : "offline";
	  // 根据结果设置显示的内容
      var status = document.getElementById("status");      
      status.setAttribute("class", condition);
      status.innerHTML = condition;
   }

   // 当文档加载完成后调用该函数
   function loaded() {
      // 首先调用函数updateOnlineStatus()检查一次状态
      updateOnlineStatus();
	  // 定义离线监听事件，如果触发就调用函数updateOnlineStatus()
      window.addEventListener("offline", function () {
         updateOnlineStatus()
      }, false);
	  // 定义在线监听事件，如果触发就调用函数updateOnlineStatus()
      window.addEventListener("online", function () {
         updateOnlineStatus()
      }, false);
   }
</script>
</head>
<body onLoad="loaded()">
  <div id="status"></div>
</body>
</html>
